[Day25] Web 前端概述 - jQuery 入門 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 25

自我挑戰組

30天學python系列第 25 篇

[Day25] Web 前端概述 - jQuery 入門

11th鐵人賽

Min

團隊菜雞自學

2019-10-11 02:28:53

943 瀏覽

分享至

使用 jQuery

jQuery 概述

Write Less Do More，用更少的代碼來完成更多的工作。
使用 CSS 選擇器來查找元素。
使用 jQuery 方法來操作元素，解決瀏覽器兼容性問題、應用於所有元素並施加多個方法。

網頁中添加 jQuery

下載 jQuery 的開發版或壓縮版，可以從這下載 jQuery。

從 CDN （內容分發網路）加載 jQuery
Google CDN：

<head>
 <script src = ”http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js”>
 </script>
 </head>

查找元素

選擇器
- element / * / #id / .class / selector1, selector2
- ancestor descendant / parent>child / previous+next / previous~siblings
篩選器
- 基本篩選器：:not(selector) / :first / :last / :even / :odd / :eq(index) / :gt(index) / :lt(index) / :animated / :focus
- 內容篩選器：:contains('…') / :empty / :parent / :has(selector)
- 可見性篩選器：:hidden / :visible
- 子節點篩選器：:nth-child(expr) / :first-child / :last-child / :only-child
- 屬性篩選器：[attribute] / [attribute='value'] / [attribute!='value'] / [attribute^='value'] / [attribute$='value'] / [attribute|='value' ] / [attribute~='value']
表單：:input / :text / :password / :radio / :checkbox / :submit / :image / :reset / :button / :file / :selected / :enabled / :disabled / :checked

執行操作

內容操作
- 獲取/修改內容：html() / text() / replaceWith() / remove()
- 獲取/設置元素：before() / after() / prepend() / append() / remove() / clone() / unwrap() / detach() / empty() / add()
- 獲取/修改屬性：attr() / removeAttr() / addClass() / removeClass() / css()
- 獲取/設置表單值：val()
查找操作
- 查找方法：find() / parent() / children() / siblings() / next() / nextAll() / prev() / prevAll()
- 篩選器：filter() / not() / has() / is() / contains()
- 索引編號：eq()
尺寸和位置
- 尺寸相關：height() / width() / innerHeight() / innerWidth() / outerWidth() / outerHeight()
- 位置相關：offset() / position() / scrollLeft() /scrollTop()
特效和動畫
- 基本動畫：show() / hide() / toggle()
- 消失出現：fadeIn() / fadeOut() / fadeTo() / fadeToggle()
- 滑動效果：slideDown()/ slideUp() / slideToggle()
- 自定義：delay() / stop() / animate()
事件
- 文檔加載：ready() / load()
- 用戶互動：on() / off()

鍊式操作

同一物件進行連續操作。

檢測頁面是否可用

< script >
    $ ( document ). ready ( function () { 
    });        

</ script >

< script >
    $ ( function () { 
    });        

</ script >

jQuery 插件

jQuery Validation：為表單提供了驗證功能，讓客戶端表單驗證變得更簡單，同時提供可選的定制選項，以滿足應用程序各種需求。
jQuery Treeview：提供了一個無序的可折疊的樹形菜單。
jQuery Autocomplete：根據用戶輸入值進行搜尋和過濾，讓用戶快速找到並從預定值列表中選擇。
jQuery UI：一個 UI 小部件和 CSS 樣式表的集合。

避免和其他庫的衝突

先引入其他庫再引入jQuery的情況。

< script  src = " other.js " ></ script > 
< script  src = " jquery.js " ></ script > 
< script >
    jQuery . noConflict (); 
jQuery ( function () { jQuery ( ' div ' ). hide ();     });         

</ script >

先引入jQuery再引入其他庫的情況。

< script  src = " jquery.js " ></ script > 
< script  src = " other.js " ></ script > 
< script >
    jQuery ( function () { 
jQuery ( ' div ' ). hide ();     });        

</ script >